<template>
  <div class="errand-index">
    <div class="my-head">
      <x-header>{{!type?'发布跑腿':'我要抢单'}}<a slot="right" @click="handleClickType">{{type?'发布跑腿':'我要抢单'}}</a></x-header>
      <tab custom-bar-width="70px" class='no-bar'>
        <tab-item v-for="(item,i) in tabList" :key="i" :selected="tabIndex===i" @on-item-click="changeTab">{{item.name}}</tab-item>
      </tab>
    </div>
    <component :is="currentComponent[tabIndex]"></component>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import {
  XHeader,
  Tab,
  TabItem
} from 'vux';

import ErrandExpressList from './ExpressList'
import ErrandHelpList from './HelpList'
import AddHelp from './Help'
import AddExpress from './Express'

@Component({
  components: {
    XHeader,
    Tab,
    TabItem,
    ErrandExpressList,
    ErrandHelpList,
    AddExpress,
    AddHelp
  }
})
export default class ErrandIndex extends Vue {
  currentComponent = [ErrandExpressList, ErrandHelpList]
  components1 = [ErrandExpressList, ErrandHelpList]
  components2 = [AddExpress, AddHelp]
  type = true
  tabIndex = 0
  tabList = [
    { name: '代取快递' },
    { name: '帮帮忙' }
  ]
  created () {
    this.tabIndex = this.$route.query.type * 1 || 0
  }
  changeTab (val) {
    this.tabIndex = val
    this.$router.replace({path: 'square', query: { type: val }})
  }
  handleClickType () {
    let loginInfo = window.localStorage.getItem('loginInfo')
    if (loginInfo && this.type) {
      this.currentComponent = this.type ? this.components2 : this.components1
      this.type = !this.type
      this.tabIndex = 0
      this.$router.replace({path: 'square', query: { type: 0 }})
    } else {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less">
  .errand-index {
    padding-bottom: 80px;
    padding-top: 95px;
    .weui-cells {
      margin-top: 0;
    }
    .no-bar{
      .vux-tab-ink-bar{
        display:none;
      }
    }
  }
</style>
